<template>
<div class="activity">
  <h4>抽奖活动</h4>
  <el-collapse v-model="active" accordion>
    <template v-if="total>0" v-for="(item,index) in list" :key="index">
      <el-collapse-item :title="`${item.title} 状态：[ ${item.status} ]`" :name="index">
        <div>
          <el-descriptions  :column="1" :title="item.title">
            <el-descriptions-item label="活动ID">{{item.id}}</el-descriptions-item>
            <el-descriptions-item label="报名时间">{{item.start_time}} - {{item.end_time}}</el-descriptions-item>
            <el-descriptions-item label="奖项设置">
              <p v-for="(p,i) in item.prize" :key="i">
                {{p.name}} : {{p.award}} 数量：{{p.count}}
              </p>
            </el-descriptions-item>
            <el-descriptions-item label="活动描述">{{item.description}}</el-descriptions-item>
            <el-descriptions-item v-if="item.status == '正在进行'" label="活动报名">
              <el-button v-if="item.exist === false" type="success" @click="joinActivity(item.id)">立即报名</el-button>
              <el-button v-else type="warning" @click="exitActivity(item.id)">取消报名</el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-collapse-item>
    </template>
    <template v-else class="error">
      暂无记录
    </template>

  </el-collapse>
  <div class="page" v-if="total > limit">
    <el-pagination
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</div>
</template>

<script>
import {reactive, toRefs, ref} from "@vue/reactivity";
import {onMounted} from "@vue/runtime-core";
import {exitActivity, getActivityList, joinActivity} from "../../api/activity";
import {error, success} from "../../utils/message";
export default {
  name: "Activity",
  setup() {
    const state = reactive({
      list : [],
      active:ref("0"),
      limit:10,
      page:1,
      total:0,
    })
    const methods = {
      async getActiveList(page){
        let params = {
          limit : state.limit,
          page : page
        }
        let resp = await getActivityList(params);
        state.list = resp.data.data
        state.total = resp.data.count
      },
      handleCurrentChange(val){
        methods.getActiveList(val)
        state.page = val
      },
      async joinActivity(aid){
        let resp = await joinActivity(aid)
        if (resp.code === 200){
          success(resp.message)
          methods.getActiveList(1)
        }else {
          error(resp.message)
        }
      },
      async exitActivity(aid){
        let resp = await exitActivity(aid)
        if (resp.code === 200){
          success(resp.message)
          methods.getActiveList(1)
        }else {
          error(resp.message)
        }
      }
    }
    onMounted(()=>{
      methods.getActiveList(1)
    })
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>

</style>